/*
To customize the look and feel of Ionic, you can override the variables
in ionic's _variables.scss file.

For example, you might change some of the default colors:

$light:                           #fff !default;
$stable:                          #f8f8f8 !default;
$positive:                        #387ef5 !default;
$calm:                            #11c1f3 !default;
$balanced:                        #33cd5f !default;
$energized:                       #ffc900 !default;
$assertive:                       #ef473a !default;
$royal:                           #886aea !default;
$dark:                            #444 !default;
*/

// The path for our ionicons font files, relative to the built CSS in www/css
$ionicons-font-path: "../lib/ionic/fonts" !default;
$kbBgColor: #343434 !default;
$item-default-border: #E8E8E8;

// Include all of Ionic
@import "www/lib/ionic/scss/ionic";

@keyframes blink {
  0%, 100% {
    border-right: 1px solid $positive;
  }
  50% {
    border-right: 1px solid transparent;
  }
}

@-o-keyframes o-blink {
  0%, 100% {
    border-right: 1px solid $positive;
  }
  50% {
    border-right: 1px solid transparent;
  }
}

@-webkit-keyframes webkit-blink {
  0%, 100% {
    border-right: 1px solid $positive;
  }
  50% {
    border-right: 1px solid transparent;
  }
}

.main {
  display: flex;
  flex-direction: column;
  .display {
    flex: 1;
    .item-avatar img {
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      border-radius: 5px;
    }
    .item-avatar h2 {
      margin: 10px 0 0 0
    }
    .push-right-top {
      position: absolute;
      right: 10px;
      top: 2px;
      color: #8c8c8c;
      font-size: 13px;
      border-right: 1px solid transparent;
    }
    .push-right-center {
      position: absolute;
      right: 10px;
      top: 24px;
      font-size: 21px;
      border-right: 1px solid transparent;
    }
    .push-right-bottom {
      position: absolute;
      color: #8c8c8c;
      right: 10px;
      bottom: 5px;
      font-size: 12px;
    }
    .item-avatar.selected {
      .item-content {
        background-color: darken($light, 15%);
      }
      background-color: darken($light, 15%);
    }
    .item.selected {
      .push-right-top {
        animation: blink 1s infinite steps(1, start);
        -webkit-animation: webkit-blink 1s infinite steps(1, start);
        -o-animation: o-blink 1s infinite steps(1, start);
      }
      .push-right-center.activated {
        animation: blink 1s infinite steps(1, start);
        -webkit-animation: webkit-blink 1s infinite steps(1, start);
        -o-animation: o-blink 1s infinite steps(1, start);
      }
    }
  }
  .kb {
    .row {
      .button {
        color: #ffffff;
        background-color: $kbBgColor;
        border-color: lighten($kbBgColor, 5%);
        font-size: 21px;
        border-radius: 0;
        padding: 6px;
      }
      .button.activated {
        background-color: darken($kbBgColor, 10%);
      }
      padding: 0;
    }
  }
}

.ec-list .list {
  width: 90%;
  margin-left: 10px;
  margin-right: auto;
  margin-top: -1px;
  .ec-item {
    border-left: none;
    border-right: none;
    border-bottom: none;
    padding-left: 0;
    padding-top: 6px;
    padding-bottom: 6px;
    .currency-pic {
      color: white;
      height: 36px;
      width: 36px;
      line-height: 36px;
      float: left;
      font-size: 28px;
      text-align: center;
    }
    h2 {
      padding-left: 10px;
      position: absolute;
      margin: auto !important;
      top: 0;
      bottom: 0;
      left: 36px;
      height: 32px;
      line-height: 32px;
    }
    span {
      position: absolute;
      right: 10px;
      top: 15px;
      color: #8c8c8c;
      font-size: 13px;
    }
  }
}

.currency-item {
  padding: 0 !important;
}

.currency-pic img {
  width: 36px;
  height: 36px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

.currency-index-bar {
  background-color: $item-default-border;
  padding-left: 10px;
  height: 20px;
  line-height: 20px;
  font-size: 80%;
  color: #545454;
}

.currency-right-bar {
  position: fixed;
  right: 0;
  width: 20px;
  height: 464px;
  z-index: 2;
  text-align: center;
  font-size: 80%;
  color: #545454;
  div {
    height: 16px;
  }
}

.currency-middle-bar {
  position: fixed;
  margin: auto;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  height: 60px;
  width: 60px;
  line-height: 60px;
  text-align: center;
  color: #ffffff;
  font-size: 300%;
  background-color: rgba(0, 0, 0, .5);
}
